<template>
	<div style="width: 100%;height: 100%;position: relative;">
		<video-player
		    class="vjs-custom-skin"
		    ref="videoPlayer"
			:options="playerOptions"
		   :playsinline="true"
			@play="onPlayerPlay($event)"
			@pause="onPlayerPause($event)"
			@ended="onPlayerEnded($event)"
			@loadeddata="onPlayerLoadeddata($event)"
			@waiting="onPlayerWaiting($event)"
			@playing="onPlayerPlaying($event)"
			@timeupdate="onPlayerTimeupdate($event)"
			@canplay="onPlayerCanplay($event)"
			@canplaythrough="onPlayerCanplaythrough($event)"
			@ready="playerReadied"
			@statechanged="playerStateChanged($event)"
		   >
		</video-player>
	</div>
</template>

<script>
	import { videoPlayer } from "vue-video-player/src";
	import 'vue-video-player/src/custom-theme.css'
	//引入video样式
	import 'video.js/dist/video-js.css'
	//引入hls.js
	import 'videojs-contrib-hls.js/src/videojs.hlsjs'
	import mitt from '@/utils/mitt.js';
	export default {
        name: 'HLSPlayer',
		components:{
			videoPlayer
		},
		props: {
		  path: {
		    type: String,
		    default: 0
		  }
		},
        data() {
            return {
				playerOptions: {
				    overNative: false,
				    autoplay: true,
				    controls: true,
					muted:true,
				    techOrder: ["html5"],
				    sourceOrder: true,
				    html5: {hls: { withCredentials: false}},
				    sources: [
				        {
				            //withCredentials: false,
				            //type: "application/x-mpegURL",
							type: "video/mp4",
				            src: ""
				        }
				    ],
				    poster: "",
					notSupportedMessage: '视频加载中！', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
				}
            }
        },
		created() {
			//console.log(videoPlayer)
		},
		mounted() {
			mitt.on('videoInit', this.videoInit);
		},
        methods: {
			videoInit(e){
				var that = this;
				that.playerOptions.sources[0].src = e//"http://192.168.16.52:9000/ydx-file/attach/2023-04-19/0a633e6f270d2c2d2d5c33cbc00715df.mp4"
				this.player()
			},
			player() {
				return this.$refs.videoPlayer.player
			},
			// listen event
			onPlayerPlay(player) {
				// console.log('player play!', player)
			},
			onPlayerPause(player) {
				// console.log('player pause!', player)
			},
			onPlayerEnded(player) {
				// console.log('player ended!', player)
			},
			onPlayerLoadeddata(player) {
				// console.log('player Loadeddata!', player)
			},
			onPlayerWaiting(player) {
				// console.log('player Waiting!', player)
			},
			onPlayerPlaying(player) {
				// console.log('player Playing!', player)
			},
			onPlayerTimeupdate(player) {
				// console.log('player Timeupdate!', player.currentTime())
			},
			onPlayerCanplay(player) {
				// console.log('player Canplay!', player)
			},
			onPlayerCanplaythrough(player) {
				// console.log('player Canplaythrough!', player)
			},
			// or listen state event
			playerStateChanged(playerCurrentState) {
				// console.log('player current update state', playerCurrentState)
			},
			// player is ready
			playerReadied(player) {
				// seek to 10s
				console.log('example player 1 readied', player)
				// console.log('example 01: the player is readied', player)
			}
        }
    };
</script>

<style>
    .video-player {
        height: 100%;
    }
    .vjs-custom-skin > .video-js {
        height: 100%;
    }
	/deep/.vjs-custom-skin .vjs-big-play-button{
		background: #000088;
	}
	
</style>
